<template>
  <div class="contain">
    <!-- 搜索 -->
    <el-form :model="query" ref="queryForm" :inline="true" class="top-search" label-position="left">
      <el-form-item label="园区名" prop="sender">
        <el-input v-model="query.gardenName" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="getList()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作菜单 -->
    <div class="mid-action">
      <div>
        <!-- <el-button type="primary" size="mini" @click="creatItem('creat')">添加</el-button> -->
      </div>
    </div>
    <!-- 表格列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="缩略图" align="center" prop="parkIntroduceImg" width="140px">
        <template slot-scope="scope">
          <el-image :src="scope.row.parkIntroduceImg" fit="cover" style="width:120px;height:80px;"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="园区名" align="center" prop="gardenName" />
      <el-table-column label="地址" align="center" prop="location" />
      <el-table-column label="建筑面积（平方）" align="center" prop="coveredArea" />
      <el-table-column label="标签" align="center" prop="name" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="是否推荐" align="center" prop="sign">
        <template slot-scope="scope">
          <span v-if="scope.row.sign == 1">已推荐</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="280">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="recommendItem(scope.row)">{{scope.row.sign == 1 ? '取消推荐' : '推荐'}}</el-button>
          <el-button size="mini" type="text" @click="recommendItem(scope.row, 'tag')">标签</el-button>
          <el-button size="mini" type="text" @click="$router.push({path:'/material/article/creat',query:{parkId:scope.row.id}})">发布文章</el-button>
          <el-button size="mini" type="text" @click="creatItem('edit', scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="changeStatus(scope.row)">{{scope.row.type == 1 ? '下架' : '上架'}}</el-button>
          <el-button v-hasPermi="['enterpriseWechat:edit']" size="mini" type="text" @click="deleteItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="query.pageNum"
      :limit.sync="query.pageSize"
      @pagination="getList()"
    />
    <!-- 编辑表单 -->
    <el-dialog :title="formTtile == 'creat' ? '添加' : '编辑'" :visible.sync="editFormShow">
      <el-form class="edit_form" :model="form" ref="form" label-width="100px" label-position="right">
        <!-- <el-form-item label="头像" prop="headImg">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="uploadFileHeader"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <el-image v-if="form.headImg" :src="form.headImg" class="avatar" fit="cover"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input class="input" v-model="form.name" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input class="input" v-model="form.phone" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="微信" prop="weChat">
          <el-input class="input" v-model="form.weChat" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="职位" prop="post">
          <el-input class="input" v-model="form.post" placeholder="请输入" clearable  />
        </el-form-item> -->
        <el-form-item label="园区名" prop="gardenName">
          <el-input class="input" v-model="form.gardenName" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="简介" prop="text">
          <el-input class="input" type="textarea" v-model="form.text" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="建筑面积" prop="coveredArea">
          <el-input class="input" v-model="form.coveredArea" placeholder="请输入" clearable  /> 平米
        </el-form-item>
        <el-form-item label="装修情况" prop="fitmentCase">
          <el-input class="input" v-model="form.fitmentCase" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="标准层高" prop="floorTall">
          <el-input class="input" v-model="form.floorTall" placeholder="请输入" clearable  />米
        </el-form-item>
        <el-form-item label="物业公司" prop="propertyCompany">
          <el-input class="input" v-model="form.propertyCompany" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="物业费" prop="propertyFee">
          <el-input class="input" v-model="form.propertyFee" placeholder="请输入" clearable  /> 平米/月
        </el-form-item>
        <el-form-item label="租金" prop="square">
          <el-input class="input" v-model="form.square" placeholder="请输入" clearable  /> 元/平米
        </el-form-item>
        <el-form-item label="运营时间" prop="serviceTime">
          <el-date-picker v-model="form.serviceTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="园区介绍图片" prop="parkIntroduceImg">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="uploadFileHeader"
            :show-file-list="false"
            :on-success="parkIntroduceImgChange">
            <el-image v-if="form.parkIntroduceImg" :src="form.parkIntroduceImg" fit="cover" style="width:376px;height:195px;"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">建议尺寸674*354px</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="地理位置" prop="location">
          <el-input class="input" type="textarea" v-model="form.location" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="位置周边" prop="ambitus">
          <el-input class="input" v-model="form.ambitus" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="园区活动图" prop="parkActivityImg">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="uploadFileHeader"
            :show-file-list="false"
            :on-success="parkActivityImgChange">
            <el-image v-if="form.parkActivityImg" :src="form.parkActivityImg" fit="cover" style="width:372px;height:113px;"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">建议尺寸674*206px</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="宣传视频" prop="publicityVideo">
          <video v-if="form.publicityVideo" :src="form.publicityVideo" style="width:372px;height:195px;" controls></video>
          <el-upload
            class="upload-demo"
            :action="uploadFile"
            :headers="uploadFileHeader"
            :limit="1"
            :on-success="publicityVideoChange">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传视频文件,大小不超过30M</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="宣传册" prop="brochure">
          <el-upload
            class="upload-demo"
            :action="uploadFile"
            :file-list="brochureList"
            :headers="uploadFileHeader"
            :limit="1"
            :on-remove="brochureRemove"
            :on-success="brochureChange">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">大小不超过20M</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="荣誉资质" prop="honorCertification">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :headers="uploadFileHeader"
            list-type="picture-card"
            :limit="6"
            :file-list="honorCertificationList"
            :on-remove="honorCertificationRemove"
            :on-success="honorCertificationChange">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="佣金比例" prop="brokerageRatio">
          <el-input-number v-model="form.brokerageRatio" controls-position="right" :precision="1" :min="0" :max="100"></el-input-number> %
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 推荐表单 -->
    <el-dialog title="填写推荐信息" :visible.sync="recommendShow">
      <el-form class="edit_form" :model="recommendForm" label-width="100px" label-position="right">
        <el-form-item label="展示标签" prop="name">
          <el-input class="input" v-model="recommendForm.name" maxlength="10" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="recommendSubmit()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { getParkList, creatPark, editPark, deletePark, getParkDetailMini, addRecommendHomePark, updateRecommendHomePark } from "@/api/eh-api";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 查询参数
        query: {
            pageNum: 1,
            pageSize: 10,
            gardenName: undefined,
        },
        list:[],
        editFormShow:false,
        formTtile:'creat',
        form:{
            "ambitus": "",
            "brochure": "",
            "brokerageRatio": "",
            "browse": 0,
            "coveredArea": "",
            "createTime": "",
            "companyProfile":"",
            "delFlag": "",
            "fitmentCase": "",
            "floorTall": "",
            "gardenName": "",
            "honorCertification": "",
            "id": 0,
            "location": "",
            "parkActivityImg": "",
            "parkIntroduceImg": "",
            "propertyCompany": "",
            "propertyFee": "",
            "publicityVideo": "",
            "serviceTime": "",
            "square": "",
            "type": 0,
            "updateTime": ""
        },
        //文件上传 start---------------
        //图片上传地址
        uploadUrl:'',
        uploadFile:'',
        //fileList
        honorCertificationList:[], //荣誉资质
        brochureList:[], //宣传手册
        //文件上传 end------------------------
        //推荐表单
        recommendShow: false,
        recommendForm: {
          homeId:'',
          type: '1',
          sign: 1,
          name:'',
        },
    };
  },
  created() {
    this.uploadUrl = process.env.VUE_APP_BASE_API + '/wx/appletFeedback/uploadimg'
    this.uploadFile = process.env.VUE_APP_BASE_API + '/common/uploadFile2Cos'
    this.uploadFileHeader = {Authorization : "Bearer " + getToken()}
    this.getList();
  },
  methods: {
    /**
     * 获取列表
     */
    getList() {
      this.loading = true;
      getParkList(this.query)
        .then(({ rows, total }) => {
          this.list = rows;
          this.total = parseInt(total);
          this.loading = false;
          this.ids = [];
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 文件上传 START
     * -------------------------------------------------------------------------------------------
     */

    /**
     * 头像图片上传
     */
    handleAvatarSuccess(res) {
      this.form.headImg = res.data.url
    },

    /**
     * 园区介绍图片
     */
    parkIntroduceImgChange:function(res) {
        this.form.parkIntroduceImg = res.data.url
    },

    /**
     * 园区活动图片
     */
    parkActivityImgChange:function(res) {
        this.form.parkActivityImg = res.data.url
    },

    /**
     * 宣传视频
     */
    publicityVideoChange:function(res) {
      this.form.publicityVideo = res.url
    },

    /**
     * 宣传册上传
     */
    brochureChange:function(res){
      this.form.brochure = res.url
    },

    /**
     * 宣传手册移除
     */
    brochureRemove:function(file, fileList){
      this.form.brochure = ''
      this.brochureList = []
    },

    /**
     * 荣誉资质
     */
    honorCertificationChange:function(res){
        this.honorCertificationList = [...this.honorCertificationList,...[res.data]]
    },

    /**
     * 荣誉资质移除
     */
    honorCertificationRemove:function(file, fileList){
      // console.log( fileList[0].response )
      this.honorCertificationList = fileList.map( item => {
        item = item.response.data
        return item
      })
      console.log(this.honorCertificationList)
    },

    /**
     * 文件上传 END
     * ----------------------------------------------------------------------
     */

    /**
     * 添加
     */
    creatItem:function(title,item) {
      this.formTtile = title
      this.editFormShow = true
      if( title == 'edit' ){
        getParkDetailMini({
          id: item.id
        }).then( res => {
          this.form = res.data
          res.data.brochure ? this.brochureList = [{
            name:'宣传手册',
            url:res.data.brochure
          }] : ''
          if( this.honorCertificationList && this.honorCertificationList != '' ){
            this.honorCertificationList = res.data.honorCertification.split(',').map( item => {
              item = {
                name:item,
                url:item
              }
              return item
            })
          }
        })
      }else{
        let from = this.form
        //初始化
        this.brochureList = []
        this.honorCertificationList = []
        Object.keys(from).forEach( (keys) => {
          from[keys] = ''
        })
        // console.log(from)
      }
    },

    /**
     * 上下架
     */
    changeStatus:function(row){
      console.log(row)
      editPark({
        id: row.id,
        type: row.type == 1 ? 2 : 1,
      }).then( res => {
        if( res.code == 200 ){
          this.$message({
            message: row.type == 1 ? '下架成功' : '上架成功',
            type: 'success'
          });
          this.getList();
        }else{
          this.$message.error(res.msg);
        }
      })
    },

    /**
     * 提交表单
     */
    submit:function(params) {
        let form = this.form
        form.companyProfile = this.form.text
        form.honorCertification = ''
        this.honorCertificationList.map( item => {
          form.honorCertification += item.url + ','
        })
        form.honorCertification = form.honorCertification.substr( 0, form.honorCertification.length - 1 )

        console.log( form )

        // console.log(this.honorCertificationList)
        if( this.formTtile == 'creat' ){
          creatPark(form).then( res => {
            if( res.code == 200 ){
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.getList();
            }else{
              this.$message.error(res.msg);
            }
          })
        }else{
          editPark(form).then( res => {
              if( res.code == 200 ){
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                });
                this.getList();
              }else{
                this.$message.error(res.msg);
              }
            })
        }
        this.editFormShow = false
    },
    /**
     * 删除
     */
    deleteItem:function(rows) {
        console.log(rows)
        deletePark({
          id:rows.id
        }).then( res => {
            if( res.code == 200 ){
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getList();
            }else{
              this.$message.error(res.msg);
            }
        })
    },

    /**
     * 事件 - 首页园区推荐
     */
    recommendItem:function(row, tag){
      this.recommendForm.homeId = row.id
      this.recommendForm.type = row.type
      this.recommendForm.id = row.recommendId
      let form = {}
      if( tag && tag == 'tag' ){ //标签
        this.recommendForm.type = 2
        this.recommendShow = true
      }else{ //推荐
        row.sign == 1 ? this.recommendForm.sign = 0 : this.recommendForm.sign = 1  //当前为 1已推荐 0未推荐
        this.recommendSubmit()
      }
    },

    /**
     * 表单提交 - 接口 - 首页园区推荐
     */
    recommendSubmit:function(){
      console.log( this.recommendForm )
      let form = {}
      if( this.recommendForm.type == 1 ){ //推荐
        form = {
          homeId: this.recommendForm.homeId,
          type: 1,
          id: this.recommendForm.id,
          sign: this.recommendForm.sign
        }
      }else{ //标签
        form = {
          homeId: this.recommendForm.homeId,
          type: 2,
          id: this.recommendForm.id,
          name: this.recommendForm.name,
        }
      }
      if( form.id ){
        updateRecommendHomePark(form).then( res => {
          if( res.code == 200 ){
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.recommendForm.name = ''
            this.recommendShow = false
            this.getList();
          }else{
            this.$message.error(res.msg);
          }
        })
      }else{
        //新增
        addRecommendHomePark(form).then( res => {
          if( res.code == 200 ){
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.recommendShow = false
            this.getList();
          }else{
            this.$message.error(res.msg);
          }
        })
      }
    },

  },
};
</script>

<style lang="scss" scoped>
.mid-action {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  align-items: center;
  .total {
    background-color: rgba(65, 133, 244, 0.1);
    border: 1px solid rgba(65, 133, 244, 0.2);
    border-radius: 3px;
    font-size: 14px;
    min-height: 32px;
    line-height: 32px;
    padding: 0 12px;
    color: #606266;
  }
  .num {
    color: #00f;
  }
}
.thumbnail {
  width: 160px;
  height: 80px;
}
.input{
  width: 80%;
}

/**头像 */
.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader /deep/.el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    line-height: 128px;
    text-align: center;
}
.avatar {
    width: 128px;
    height: 128px;
    display: block;
}
</style>
